import { ref, onMounted, computed } from 'vue'
import { toast } from '@/composables/util'

// 列表，分页,搜索，删除，修改状态
export const useInitTable = (opt = {}) => {
  let searchForm = null
  let resetSearchForm = null
  if (opt.searchForm) {
    searchForm = ref({ ...opt.searchForm })
    resetSearchForm = () => {
      for (const key in opt.searchForm) {
        searchForm.value[key] = opt.searchForm[key]
      }
      getData()
    }
  }
  const tableData = ref([])
  const loading = ref(false)
  const total = ref(0)
  const currentPage = ref(1)
  onMounted(() => {
    getData()
  })

  const getData = async (p = null) => {
    if (typeof p === 'number') {
      currentPage.value = p
    }
    loading.value = true
    const res = await opt.getList(currentPage.value, searchForm ? searchForm.value : null)

    loading.value = false
    if (opt.onGetListSuccess && typeof opt.onGetListSuccess === 'function') {
      opt.onGetListSuccess(res)
    } else {
      // loading.value = false
      tableData.value = res.list
      total.value = res.totalCount
    }

    console.log(res)
  }
  // 修改状态
  const handleStatusChange = async (status, row) => {
    // console.log(status);
    row.statusLoading = true
    const res = await opt.updateStatus(row.id, status)
    row.status = status
    row.statusLoading = false
    console.log(res)
    toast('修改状态成功')
  }

  // 删除
  const handleDelete = async (id) => {
    // console.log(id);
    const res = await opt.delete(id)
    toast('删除成功')
    getData()
  }

  // 多选选中id
  const multiSelectionIds = ref([])
  const handleSelectionChange = (e) => {
    // console.log(e.map(o => o.id));
    multiSelectionIds.value = e.map((o) => o.id)
  }
  // 批量删除方法
  const multipleTableRef = ref(null)
  const handleMultiDelete = async () => {
    loading.value = true
    const res = await opt.delete(multiSelectionIds.value)
    loading.value = false
    toast('删除成功')
    // 清空选中
    if (multipleTableRef.value) {
      multipleTableRef.value.clearSelection()
    }
    getData()
  }

  // 批量修改状态
  const handleMultiStatusChange = async (status) => {
    loading.value = true
    const res = await opt.updateStatus(multiSelectionIds.value, status)
    loading.value = false
    toast('修改状态成功')
    // 清空选中
    if (multipleTableRef.value) {
      multipleTableRef.value.clearSelection()
    }
    getData()
  }
  return {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    total,
    currentPage,
    getData,
    handleStatusChange,
    handleDelete,
    handleSelectionChange,
    multipleTableRef,
    handleMultiDelete,
    handleMultiStatusChange,
    multiSelectionIds,
  }
}

//新增，修改
export const useInitForm = (opt = {}) => {
  const defaultForm = opt.form
  const form = ref({
    username: '',
    password: '',
    role_id: null,
    status: 1,
    avatar: '',
  })
  const rules = opt.rules || {}
  const formDrawerRef = ref(null)
  const formRef = ref(null)
  const editId = ref(0)
  const drawerTitle = computed(() => {
    return editId.value ? '修改' : '新增'
  })

  const resetForm = (item) => {
    if (formRef.value) {
      formRef.value.resetFields()
    }
    for (let key in defaultForm) {
      form.value[key] = item[key]
    }
  }
  const handleCreate = () => {
    editId.value = 0
    resetForm(defaultForm)
    formDrawerRef.value.openDrawer()
  }

  // 修改
  const handleEdit = (row) => {
    editId.value = row.id
    resetForm(row)
    // console.log(row)
    formDrawerRef.value.openDrawer()
  }

  const handleSubmit = async () => {
    let body = {}
    if (opt.beforeSubmit && typeof opt.beforeSubmit === 'function') {
      body = opt.beforeSubmit({ ...form.value })
    } else {
      body = form.value
    }
    const fun = editId.value ? opt.update(editId.value, body) : opt.add(body)
    const res = await fun
    toast(drawerTitle.value + '成功')
    opt.getData()
    formDrawerRef.value.closeDrawer()
  }
  return {
    form,
    formDrawerRef,
    formRef,
    editId,
    drawerTitle,
    rules,
    resetForm,
    handleEdit,
    handleSubmit,
    handleCreate,
  }
}
